import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons'
import { Tooltip } from 'antd'
import { useIntl } from '@ant-design/pro-provider'
import { useEffect, useState } from 'react'

const FullScreenIcon = () => {
  const intl = useIntl()
  const [fullscreen, setFullscreen] = useState<boolean>(false)
  useEffect(() => {
    document.onfullscreenchange = () => {
      setFullscreen(!!document.fullscreenElement)
    }
  }, [])
  return fullscreen
    ? (
    <Tooltip title={intl.getMessage('tableToolBar.exitFullScreen', '全屏')}>
      <FullscreenExitOutlined />
    </Tooltip>
      )
    : (
    <Tooltip title={intl.getMessage('tableToolBar.fullScreen', '全屏')}>
      <FullscreenOutlined />
    </Tooltip>
      )
}

export default FullScreenIcon
